﻿@charset "utf-8";
.liang_mimi {
	-webkit-animation-name: 'ripple';
	/*动画属性名，也就是我们前面keyframes定义的动画名*/
	-webkit-animation-duration: 0.6s;
	/*动画持续时间*/
	-webkit-animation-timing-function: ease-out;
	/*动画频率，和transition-timing-function是一样的*/
	-webkit-animation-delay: 0s;
	/*动画延迟时间*/
	-webkit-animation-iteration-count: infinite;
	/*定义循环资料，infinite为无限次*/
	-webkit-animation-direction: alternate;
	/*定义动画方式*/
}

@keyframes ripple {
	0% {
		width: c(0px);
		height: c(0px);
	}
	50% {
		opacity: 0.5;
		width: c(30px);
		height: c(30px);
	}
	100% {
		opacity: 0.5;
		width: c(60px);
		height: c(60px);
	}
}

.liang_kugou {
	&::after {
		content: "";
		display: block;
		clear: both;
	}
}

.my_animation {
	animation-name: r_n;
	/*名字和下面对应*/
	animation-duration: 1s;
	/*时间*/
	animation-timing-function: ease-in-out;
	/*方式： 快慢快*/
	/*	animation-delay: 1s;/*(延迟一秒)*/
	animation-fill-mode: forwards;
	/*最终状态*/
	animation-iteration-count: infinite;
	/*(次数)*/
}

@keyframes r_n {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(16px);
	}
	50% {
		transform: translateY(0)
	}
	75% {
		transform: translateY(-16px)
	}
	100% {
		transform: translateY(0)
	}
}


/*=========*/

section {
	position: relative;
	width: 100%;
	height: 100%;
}

#section05 {
	/*background-color: skyblue;*/
}

.demo a {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 2;
	display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	color: #fff;
	font: normal 400 20px/1 'Josefin Sans', sans-serif;
	letter-spacing: .1em;
	text-decoration: none;
	transition: opacity .3s;
}

.demo a:hover {
	opacity: .5;
}

#section05 a {
	padding-top: 70px;
}

#section05 a span {
	position: absolute;
	top: 70px;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb05 1.5s infinite;
	animation: sdb05 1.5s infinite;
	box-sizing: border-box;
}

@-webkit-keyframes sdb05 {
	0% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}

@keyframes sdb05 {
	0% {
		transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
	/*=========*/
	/*=============*/
	
	/*=============*/